<template>
  <div>
    <profile-sub-tabs :tabs="tabs" :default-tab="tabs[0].key" />
    <template v-for="tab in tabs">
      <div v-if="tab.key === active" :key="tab.key" class="custom-table p-x-16">
        <template v-if="active === 'docs'">
          <component-docs-list-item v-for="item in collections.docs" :key="item.id" :file="item" />
        </template>
        <template v-if="active === 'issues'">
          <component-issues-list-item
            v-for="item in collections.issues"
            :key="item.id"
            :issue="item"
          />
        </template>
        <template v-if="active === 'answers'">
          <component-answers-list-item
            v-for="item in collections.answers"
            :key="item.id"
            :answer="item"
          />
        </template>
        <window-bottom-load
          :loading="loading[active]"
          :no-more="!nextPage[active]"
          @load="loadCollections"
        />
      </div>
    </template>
  </div>
</template>

<script>
import ProfileSubTabs from '@/views/users/show/components/profile-sub-tabs';
import WindowBottomLoad from '@/components/window-bottom-load';
import { formatResources } from '@/components/spaces/resources-v2/format';
import { formatIssues } from '@/views/issues/format';
import { formatComments } from '@/components/issues-answers/format';
import ComponentDocsListItem from '@/views/users/show/lists/collections-list/component-docs-list-item';
import ComponentIssuesListItem from '@/views/users/show/lists/collections-list/component-issues-list-item';
import ComponentAnswersListItem from '@/views/users/show/lists/collections-list/component-answers-list-item';

export default {
  name: 'collections-list',
  components: {
    ProfileSubTabs,
    WindowBottomLoad,
    ComponentDocsListItem,
    ComponentIssuesListItem,
    ComponentAnswersListItem,
  },
  props: {
    curTab: String,
  },
  data() {
    return {
      tabs: [
        { key: 'docs', label: '资源' },
        { key: 'issues', label: '问题' },
        { key: 'answers', label: '回答' },
      ],
      collections: {
        docs: [],
        issues: [],
        answers: [],
      },
      loading: {
        docs: false,
        issues: false,
        answers: false,
      },
      nextPage: {
        docs: null,
        issues: null,
        answers: null,
      },
    };
  },
  computed: {
    userId() { return this.$route.params.userId; },
    active() { return this.$route.query.type || this.tabs[0].key; },
    loadCollectionsParams() {
      return {
        userId: this.userId,
        type: this.active,
        page: this.nextPage[this.active] || 1,
      };
    },
    loadCollectionsTriggerParams() {
      return {
        curTab: this.curTab, // this=collections
        userId: this.userId,
        type: this.active,
      };
    },
  },
  methods: {
    loadCollections() {
      const params = JSON.parse(JSON.stringify(this.loadCollectionsParams));
      this.$set(this.loading, params.type, true);
      const formatParams = Object.assign({}, params, { type: this.formatType(params.type) });
      this.$api.other.collectionList(formatParams)
        .then((res) => {
          const newList = this.collections[params.type].concat(this.formatResult(res.data));
          this.$set(this.collections, params.type, newList);
          this.$set(this.nextPage, params.type, res.kaminari.next_page);
        })
        .catch(() => {})
        .then(() => this.$set(this.loading, params.type, false));
    },
    formatType(type) {
      switch (type) {
        case 'docs': return 'ProductFile';
        case 'issues': return 'Issue';
        case 'answers': return 'Comment';
        default: return '';
      }
    },
    formatResult(list) {
      switch (this.active) {
        case 'docs': return formatResources(list);
        case 'issues': return formatIssues(list);
        case 'answers': return formatComments(list);
        default: return [];
      }
    },
    // 清空数据
    clearCollections() {
      this.tabs.forEach(({ key }) => {
        this.$set(this.collections, key, []);
        this.$set(this.nextPage, key, null);
      });
    },
  },
  watch: {
    loadCollectionsTriggerParams(newVal, oldVal) {
      const userChanged = newVal.userId !== oldVal.userId; // 用户是否改变
      const isCurTab = newVal.curTab === 'collections'; // 是否激活当前类别
      const tabIntoCur = isCurTab && (oldVal.curTab !== 'collections'); // 从别的类型切换过来的
      const typeChanged = isCurTab && !tabIntoCur && (oldVal.type !== newVal.type); // 在当前类型下切换了子类型
      const curNoData = !(this.collections[newVal.type] || []).length;

      if (userChanged) {
        this.clearCollections();
        if (isCurTab) {
          this.loadCollections();
          return;
        }
      }

      if ((tabIntoCur || typeChanged) && curNoData) {
        this.loadCollections();
      }
    },
  },
};
</script>

<style></style>
